<template>
    <div>
        <div class="card-header">
            <span>{{title}}</span>
            <i class="el-icon-info"></i>
        </div>
        <div class="card-content">{{count}}</div>
        <div class="card-chars">
            <slot name="chars"></slot>
        </div>
        <div class="card-footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Detail',
    props: ['title','count']
}
</script>

<style  lang='less' scoped>
* {
    margin: 0;
    padding: 0;
}

.card-header {
    color: #B3C1C0;
    display: flex;
    justify-content: space-between;
}

.card-content {
    font-size: 30px;
    padding: 10px 0px;
}

.card-chars {
    width: 100%;
    height: 40px;
}

.card-footer {
    border-top: 1px solid #eee;
    padding: 5px 0px;
}
</style>
